<template>
  <n-scrollbar class="flex-1-hidden">
    <n-menu
      v-model:expanded-keys="expandedKeys"
      :value="(route.name as string)"
      :collapsed="appStore.siderCollapse"
      :collapsed-width="themeStore.sider.collapsedWidth"
      :collapsed-icon-size="22"
      :options="routeStore.menus"
      :indent="18"
      :inverted="!themeStore.darkMode && themeStore.sider.inverted"
      @update:value="handleMenuSelect"
    />
  </n-scrollbar>
</template>

<script setup lang="ts">
import { useAppStore, useRouteStore, useThemeStore } from "@/store";
import { useMenu } from "../../hooks";

const appStore = useAppStore();
const themeStore = useThemeStore();
const routeStore = useRouteStore();

const { route, expandedKeys, handleMenuSelect } = useMenu(routeStore.menus);
</script>

<style scoped></style>
